<template>
  <div>
    <My-head :back="false" title="电影"></My-head>

    <!--vant插件 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(l, i) in banners" :key='i'>
          <van-image class="vimg" :src="l.imgUrl"></van-image>
      </van-swipe-item>
    </van-swipe>

    <!-- 显示所选择地址信息在页面的位置 -->
    <div @click="gotocity" v-if="city" class="myaddress">
        <p> {{ city.name }} </p>
        <van-icon name="arrow-down" />
    </div>

    <div class="nav">
        <van-tabs
        v-model="type" 
        title-active-color="deeppink"
        swipeable
        sticky
        >
          <van-tab title="正在热映" name="1">
            <mList :films="films" :type="type"></mList>
          </van-tab>

          <van-tab title="即将上映" name="2">
             <mList :films="films" :type="type"></mList>
          </van-tab>
        </van-tabs>
    </div>

  </div>

</template>

<script>
import store from '@/store'
import { Dialog }  from 'vant'
import router from '@/router'

export default {
  data() {
      return {
          banners: [],
          list: [],
          pageNum:1,  // 第几页
          pageSize:10 ,  // 每页10条数据
          type:1,  // 1 正在热映 2. 即将上映 
          films:[],
          total:0
      }
  },
  watch: {
    type(v) {
      console.log(v);
      this.getFilms();
    }
  },
  methods: {
    gotocity() {
      this.$router.push({ name: 'city', query: { city: this.city.name } }) // 跳转city页面，并携带选择信息
    },
    getBanner() {
      // 获取轮播数据
      this.$ajax.getMaiData({
        type: 2,   // 不能省略 只能2有数据 
        cityId: this.city.cityId,
        // k: 7858224,
      },{
        'X-Host': 'mall.cfg.common-banner',
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16365290664876059191279617","bc":"110100"}',
      })
      .then(res => {
        this.banners = res.data 
      })
    },
    getFilms() {
      // 获取电影列表
      this.$ajax.getMaiData({
        cityId: this.city.cityId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.type,
      },{
        'X-Host': 'mall.film-ticket.film.list'
      })
      .then(res => {
          this.films = res.data.films;
          this.total = res.data.total;
      })
    }
  },
  created() {
      if(store.state.city) {
        this.getBanner()
        this.getFilms()
    } else {
      // 弹框提示 
      console.log("提示选择城市")
      Dialog.alert({
        title: '温馨提示',
        message: '你还没有选择城市,请先选择城市',
      }).then(() => {
        // on close
        router.push({ name: 'city'})
      })
    }
  }
}
</script>

<style lang="scss">

.vimg {
  width: 100%;
  height: 100%;
}

.myaddress {
    position: absolute;
    top: 54px;
    left: 7px;
    color: #fff;
    z-index: 10;
    font-size: 13px;
    background: rgba(0,0,0,.2);
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    padding: 0 5px;
    display: flex;
    align-items: center;
}

.van-icon-arrow-down {
  font-size: 10px;
  color: white;
}

.van-swipe__indicators { // 轮播图翻页按钮位置
    left: 92%;
}
</style>